<template>
  <div>
    <div v-if="jurisdiction>10">
    <el-button type="primary" class="but" @click="dialogFormVisible = true"
      >添加</el-button
    >
    <el-table :data="NavList" stripe style="width: 100%" border>
      <el-table-column label="序号" type="index" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="channel"
        label="栏目名称"
        align="center"
        width="width"
      >
      </el-table-column>
      <el-table-column prop="" align="center" label="操作" width="width">
        <template slot-scope="{ row, $index }">
          <el-button type="primary" icon="el-icon-refresh" @click="alterNav(row)">更改</el-button>

          <el-popconfirm :title="`您确定要删除${row.channel}吗?`" @onConfirm="delnavlist(row.id)">
            <el-button
              style="margin-left: 10px"
              slot="reference"
              type="danger"
              icon="el-icon-delete"
              >删除</el-button
            >
          </el-popconfirm>

          <!-- <el-button type="danger" @click="delnavlist(row.id)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加弹窗 -->
    <el-dialog
      title="添加栏目名称"
      :visible.sync="dialogFormVisible"
      close-on-press-escape
    >
      <el-form :model="form">
        <el-form-item label="栏目名称" :label-width="formLabelWidth">
          <el-input v-model="form.channel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="cs_id" :label-width="formLabelWidth">
          <el-input v-model="form.cs_id" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addnavlist">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog
      title="添加栏目名称"
      :visible.sync="dialogFormVisibles"
      close-on-press-escape
    >
      <el-form :model="form">
        <el-form-item label="栏目名称" :label-width="formLabelWidth">
          <el-input v-model="channel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="cs_id" :label-width="formLabelWidth">
          <el-input v-model="cs_id" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibles = false">取 消</el-button>
        <el-button type="primary" @click="alternavlist">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <div v-else class="showHidden">对不起，您当前权限值无法查看此模块</div>
  </div>
</template>

<script>
export default {
  name: "kernel",
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisibles: false,
      form: {
        channel: "",
        cs_id: "",
      },
        channel: "",
        cs_id: "",
        id:"",
      formLabelWidth: "120px",
      //保存栏目数据
      NavList: [],
      jurisdiction:''
    };
  },
  mounted() {
    this.getNavList();
    this.jurisdiction = localStorage.getItem('jurisdiction')
  },
  methods: {
    //获取栏目数据
    async getNavList() {
      let result = await this.$API.navList.getNavList();
      if (result.data.code == 200) {
        this.NavList = result.data.data.ret;
      }
    },
    //添加
    async addnavlist() {
      this.dialogFormVisible = false;
      let { cs_id, channel } = this.form;
      await this.$API.navList.addNav(cs_id, channel);
      this.getNavList();
    },

    //修改
    alterNav(row){
      let { cs_id, channel,id } = row;
      this.cs_id=cs_id;
      this.channel=channel;
      this.id=id;
      this.dialogFormVisibles=true
    },
    async alternavlist(){
      this.dialogFormVisibles = false;
      let { id,cs_id, channel}=this
      await this.$API.navList.alterNav(id,cs_id, channel)
      this.getNavList();
    },

    //删除
    async delnavlist(id) {
      await this.$API.navList.deleteNav(id)
      this.getNavList();
    },
  },
};
</script>

<style  scoped>
.but {
  margin: 10px;
}
.showHidden{
  text-align:center;
  font-size:25px;
  margin-top: 100px;
  color:red;
}
</style>